tiangong-doc
2024-02-27
目录

天宫框架 从 v1.x 升级 v2.x

# 一. 框架 V2.X 升级源码

框架 V2.X 升级源码下载

升级说明资料 xmind 下载

# 二. 升级步骤（重要：请备份好原来的代码！！！）

以业务项目为基础，将 天宫前端框架 v2.x 代码升级到业务代码中。

# 前端

# 1. public 文件夹（修改）

# （1）tiangong_public 删除，拷贝框架的public/tiangongPublic
# （2）web 删除，拷贝框架的public/web

文件 public/website.js备注

window.website = {
	// 如下字段 window.website.appName 的优先级高于 .env 中 VITE_TG_SYS_NAME
	// 如不需要在 window.website.appName 中设置，则将此字段注释
    appName: "修改为业务系统名称",
    appAlias: "修改为业务系统名称",
    
    apiServer: {
    	// 请求基础地址，如下字段  window.website.apiServer.base 的优先级高于 .env.xx 中的 VITE_BASE_URL
    	//  如不需要在 window.website.apiServer.base 中设置，则将此字段注释
    	base:"请求基础地址"
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

# 2. deps 文件夹（新增）

# （1）拷贝框架的 deps/element-plus.tar.gz

# 3. src文件夹

# （1）src/tiangong_core 删除
# （2）src/tiangong_exn（如果没有扩展，可以直接删除）

注： 不在作为框架管理的文件夹

  1. 文件夹 src/tiangong_exn/svg 移动到 文件夹 src/web/extension 中
  2. 文件 src/tiangong_exn 中的扩展方法入口优化为 src/web/extension/index.js ，接口信息参考如下。
    示例代码在src/web中有讲解。
// 系统菜单功能
// import * as menu from './Menu'

// 框架扩展 main.js 功能
// import * as appMain from '业务路径';

// 框架扩展 路由功能
// import * as router from '业务路径';

// 框架扩展 store 功能
// import * as store from '业务路径';

// 框架扩展 登录页面后的全局设置方法等
// import * as useApp from '业务路径';

// 框架扩展 清除缓存的方法
// import * as clearCache from "业务路径";

// 框架扩展 标签页 收藏功能等
// import * as menuTag from "业务路径";

// 框架扩展 主题设置方法
// import * as theme from "业务路径";

export default {
    // menu,
    // appMain,
    // router,
    // store,
    // useApp,
    // clearCache,
    // menuTag,
    // theme
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# （3）src/web 修改

1，创建一个文件夹，放当前项目的vue界面。(文件夹的命名规范：appWms：一般是app+项目名称驼峰)，把涉及到项目的开发的vue文件，都拷贝到这个appWms中。备注：权限平台菜单不需要修改，在环境变量上添加前缀，下面有示例。
2，拷贝框架 src/web/app （框架的扩展接口），到项目的src/web/app
3，拷贝框架 src/web/appTiangong，到项目的src/web/appTiangong；这个文件夹是框架的内置功能界面（例如：数据源配置等界面）
4，拷贝框架的 src/web/extension，到项目的src/web/extension；这个文件夹是业务系统的扩展代码
扩展方法写法可以参考文件夹 src/web/app/extension，如下为部分示例

menu.js

export {
    menuItemShow,
    menuItemNum,
    beforeMenuClick
}
1
2
3
4
5
appMain.js

export default function(app) {}
1
appRouter.js

const routes = [];
function setRoutes() {
    return routes;
}

export default {
    setRoutes
};
1
2
3
4
5
6
7
8
appStore.js

function setStore() {
    return {
        state,
        getters,
        mutations
    };
}

function setSysParametersStore() {
    return sysParameters;
}

function setLayoutStore() {
    return layout;
}

export default {
     setStore,
    
    // 框架扩展给灵境项目使用的方法，后期会删除
    setSysParametersStore,
    // 框架扩展给灵境项目使用的方法，后期会删除
    setLayoutStore
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
clearCache.js

function clearAllCache() {}

export default {
    clearAllCache
};
1
2
3
4
5

5，拷贝框架的 src/web/home ：此文件夹内的 homeIndex.vue 为工作台的文件，原路径为 src/tiangong_exn/components/worktable/index.vue。

# （4）src/tiangongCore（新增）

拷贝框架的src/tiangongCore，到项目的src/tiangongCore

# 4. App.vue(修改)

修改script

// import useAppCore from '@core/hooks/component/useAppCore';
// 修改为 
import useAppCore from '@core/hooks/app/useAppCore';


// SettingCore.loadUseAppType + '' === '1' ? useAppCore() : useApp();
// 修改为
SettingCore.VITE_TG_LOAD_USE_APP_TYPE + '' === '1' ? useAppCore() : useApp();

// import useAppCoreCommon from '@core/hooks/component/useAppCoreCommon';
// 修改为
import useAppCoreCommon from '@core/hooks/app/useAppCoreCommon';

// import useApp from './tiangong_exn/hooks/app/useApp';
// 修改为 
import {useApp} from "@/web/app/extension/useApp";
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

删除 style

<!-- 删除 -->
<style lang="less">
@import url('@core/assets/less/APP.less');
</style>
1
2
3
4

# 5 替换文件夹 main.js（修改）

若 main.js 中存在引入业务功能，优化到 src/extension/index.js 中 引入 appMain.js

# 6 修改文件 index.html（修改）

<!-- 增加如下代码 -->
<script type="text/javascript" src="/web/website.js"></script>
<script type="text/javascript" src="/web/businessIndex.js">
    
<!--  引入文件名优化，文件路径  tiangong_public  优化为 tiangongPublic -->    
<script type="text/javascript" src="/tiangongPublic/config.js"></script>
<link href="/tiangongPublic/font/iconfont.css" rel="stylesheet" />

<!--删除下面的内容-->
<script type="text/javascript" src="/tiangong_public/config.js"></script>
<link href="/tiangong_public/font/iconfont.css" rel="stylesheet" />
1
2
3
4
5
6
7
8
9
10
11

# 7 修改文件 .gitignore

增加如下代码

!/deps/*.tar.gz
1

# 8 修改文件 package.json

新增如下代码

{
    "dependencies":{
        "@vueuse/core": "^10.7.0",
        // element-plus 优化为 "element-plus": "file:deps/element-plus.tar.gz",
        "element-plus": "file:deps/element-plus.tar.gz",
        "events": "^3.3.0",
        "lodash-es": "^4.17.21", 
        "pouchdb": "^8.0.1",
        "pouchdb-browser": "^8.0.1",
        "pouchdb-find": "^8.0.1",
        "qs": "6.11.1",
        "spark-md5": "^3.0.2",
        "vue-simple-uploader": "^1.0.2",
    	"vue-ueditor-wrap": "^3.0.8",
	},
    "devDependencies":{
        "@types/pouchdb": "^6.4.2",
        "@types/pouchdb-find": "^7.3.3"        
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 9 修改文件 vite.config.js

优化 plugins.createSvgIconsPlugin.iconDirs 和 resolve.alias 内容

export default defineConfig({
    plugins:[
        createSvgIconsPlugin({
            // 如下引入路径优化
           iconDirs: [path.resolve(process.cwd(), 'src/web/extension/svg')],
        })
    ],
    resolve:{
        alias:{
           // 如下框架内容更新
            '@': path.resolve(__dirname, './src'),
            // 框架代码文件夹
            '@core': path.resolve(__dirname, './src/tiangongCore'),
            // 框架开发功能
            '@webApp': path.resolve(__dirname, './src/web/app'),
            // 框架页面
            '@appTiangong': path.resolve(__dirname, './src/web/appTiangong'),
            // 公共方法
            '@coreTools': path.resolve(__dirname, './src/tiangongCore/utils/TgMethods'),
            // 请求方法
            '@coreRequest': path.resolve(__dirname, './src/tiangongCore/utils/TgRequest'),
            // 请求方法
            '@coreHttp': path.resolve(__dirname, './src/tiangongCore/utils/TgRequest/TgHttp'),
            // 全局方法
            '@coreTg': path.resolve(__dirname, './src/tiangongCore/utils/TgPublic'),
            // 全局方法 Plus
            '@coreTgPlus': path.resolve(__dirname, './src/tiangongCore/utils/common/tg'),
            // QueryPage模型
            '@coreQueryPage': path.resolve(__dirname, './src/tiangongCore/models/QueryPage/QueryPage'),
            // EditPage模型
            '@coreEditPage': path.resolve(__dirname, './src/tiangongCore/models/EditPage/EditPage'),
            // EditTab模型
            '@coreEditTab': path.resolve(__dirname, './src/tiangongCore/models/EditTab/EditTab'),
            // CommonPage模型
            '@coreCommonPage': path.resolve(__dirname, './src/tiangongCore/models/CommonPage'),
            // componentSetting
            '@componentSetting': path.resolve(__dirname, './src/web/app/setting/componentSetting.js'),
            // 框架组件
            '@coreComponents': path.resolve(__dirname, './src/tiangongCore/components/business'),
            "@i18nHelper": path.resolve(__dirname, './src/tiangongCore/locale/i18nHelper'),
            'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',            
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# 10 修改文件 .env

src/tiangong_exn/components 里面的插槽优化为 如下配置文件

# layout 布局header 用户信息的插槽
VITE_TG_COMPONENT_HEARDER_DROP_DOWN_DOWN = '业务文件路径，比如 extension/slot/HeaderDropdown/DropDownUp'
VITE_TG_COMPONENT_HEARDER_DROP_DOWN_UP = '业务文件路径'

# layout 布局 header 插槽
VITE_TG_COMPONENT_HEARDER_NOTICE = '业务文件路径'

# layout 布局上的插槽
VITE_TG_COMPONENT_HOME_PAGE_EXTEND = '业务文件路径'

# 快捷工作区插槽
VITE_TG_COMPONENT_QUICK_WORK = '业务文件路径'
1
2
3
4
5
6
7
8
9
10
11
12

其他

# 路由前置路径 在src里面的新建的文件夹名称叫appWms
VITE_TG_ROUTER_BASIC_PATH = /appWms

# 国际化
VITE_TG_LANG_SYS_CODE = 'TG'
VITE_TG_LANG_MODE = 'offline'
VITE_TG_LANG_SERVER = 'http://192.168.106.178:9004/eaapi'
# 切换语言功能  开：'true'
VITE_TG_LANG_SWITCHINNAVBAR = 'false'
VITE_TG_LANG_SWITCHINSETTING = 'false'
VITE_TG_LANG_REFRESHWHENSWITCH = 'false'
VITE_TG_LANG_LIST = ''
VITE_TG_LANG_PATH = ''
1
2
3
4
5
6
7
8
9
10
11
12
13

# 11. 国际化升级（如果之前系统没有国际化，可以忽略）

# （1）src/tiangong_exn/language文件夹，拷贝到当前项目的src/web/appWms(业务系统的文件夹)
# （2）在src/web/appWms/language文件夹中， 新增i18n.js和language.js，代码如下
# i18n.js（新增）
/**  
* 注册i18n国际化  
*/  
import languagePack from './language'  
import {i18n} from "@core/locale/setupI18n";  
 
export default function (app) {  
const langStr = 'zh_CN'  
let message = {  
...i18n.global.getLocaleMessage(langStr), ...languagePack[langStr]  
}  
i18n.global.setLocaleMessage(langStr, message)  
app.use(i18n)  
return i18n  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# language.js（新增）
/**  
* @description 国际化文件导入合并  
* @author Jerome.luo  
* @date 2022/06/20  
* @param { }  
* @return { Object }  
*/  
 
const zhCn = import.meta.globEager('./ch/**/*.js')  
 
function forEachModules(modules) { // 获取文件路径的数据  
let obj = {}  
for (const key in modules) {  
obj = {  
...obj,  
...modules[key].default  
}  
}  
return obj  
}  
 
const language = {  
zh_CN: {...forEachModules(zhCn)},  
}  
export default language
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# （3）web/extension/index.js

添加如下代码

import * as appMain from "./appMain";

export default {
    appMain
}
1
2
3
4
5
# （4）appMain.js 文件

对应的业务路径/language/i18n： 为业务自定义的内容

import i18n from "src/web/appWms/language/i18n";

export default function (app) {
    i18n(app); // 国际化
}
1
2
3
4
5

# 后端

# 项目的pom.xml

在dependencies节点中，把涉及到tiangong的依赖都删掉。然后粘贴下面的内容，到dependencies节点中

<dependency>  
<groupId>com.eci</groupId>  
<artifactId>tiangong-core</artifactId>  
<version>2.2.0_release</version>  
</dependency>  
  
<dependency>  
<groupId>com.eci</groupId>  
<artifactId>tiangong-sso</artifactId>  
<version>2.2.0_release</version>  
</dependency>  
  
<dependency>  
<groupId>com.eci</groupId>  
<artifactId>tiangong-system</artifactId>  
<version>2.2.0_release</version>  
</dependency>  
  
<dependency>  
<groupId>com.eci</groupId>  
<artifactId>tiangong-third</artifactId>  
<version>2.2.0_release</version>  
</dependency>  
  
<dependency>  
<groupId>com.eci</groupId>  
<artifactId>tiangong-component</artifactId>  
<version>2.2.0_release</version>  
</dependency>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
上次更新: 2024/3/21 08:50:37
灵境关务.货物申报系统从 v1.x 升级 v2.x
前端介绍

← 前端介绍→

最近更新
01
EciReport模板导出_Core
09-10
02
EciReport模板导出
09-09
03
Core权限平台接口
07-25
更多文章>
Theme by Vdoing